<template>
  <div>
    <router-view></router-view>
    <ul class="tabbar">

      <li class="tabbar-item">
        <router-link to='/showss'>
          <span class="iconfont icon-sanguohome"></span>
          <p>首页</p>
        </router-link>
      </li>

      <li class="tabbar-item">
        <router-link to='/typess'>
          <span class="iconfont icon-icon04"></span>
          <p>分类</p>
        </router-link>
      </li>

      <li class="tabbar-item">
        <router-link to='/shopcarss'>
          <span class="iconfont icon-shop-cart-"></span>
          <p>购物车</p>
        </router-link>
      </li>

      <li class="tabbar-item">
        <router-link to='/myss'>
          <span class="iconfont icon-i-smile"></span>
          <p>我的</p>
        </router-link>
      </li>

    </ul>
  </div>
</template>

<style scoped>

.tabbar{
  position: fixed;
  bottom: 0px;
  display: flex;
  height: 3.5rem;
  background: #F7F9FA;
  width: 100%;
  align-items: center;
  justify-content:space-around;
  font-size: 0.8rem;
  z-index:99;

}

.tabbar-item{
  text-align: center;
}

.tabbar-item a{
  text-decoration: none;
  color:#232628;
}

.iconfont{
  font-size: 1.5rem;
}
.router-link-active{
  color: #FF734C!important;
}

</style>